<template>
    <div>
        <div class="i-layout-page-header">
            <PageHeader title="员工信息" hidden-breadcrumb />
        </div>
        <!--    公共筛选查询区域-->
        <Card :bordered="false" dis-hover >
            <!--筛选查询条件区域-->
            <Form ref="form" :model="data" :rules="rules" :label-width="labelWidth" :label-position="labelPosition" >
                <Row :gutter="24" type="flex" justify="end">
                    <Col v-bind="grid" >
                        <FormItem label="是否审核：" :rop="roleGroup" label-for="roleGroup">
                            <Select v-model="data.roleGroup" placeholder="请选择" element-id="roleGroup">
                                <Option value="0">未审核</Option>
                                <Option value="1">已审核</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col v-bind="grid">
                        <FormItem label="搜索名称：" prop="name" label-for="name" >
                            <Input v-model="data.name" placeholder="请输入关键字" element-id="name"/>
                        </FormItem>
                    </Col>
                    <Col v-bind="grid" class="ivu-text-right">
                        <FormItem>
                            <Button type="primary" @click="handleSubmit">查询</Button>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
            <!--新增-->
            <div class="buttonContain" >
                <Button  @click="handleOpenCreate"  type="primary">新增</Button>
            </div>
        </Card>
        <!--总卡片区域-->
        <Card :bordered="false" dis-hover class="ivu-mt">
            <!--切换table区域-->
            <Tabs type="card" v-model="activeName" :animated="false">
                <TabPane label="已审核" name="yes">
                    <!--数据渲染区域-->
                    <div class="i-table-no-border">
                        <!--        <Button type="primary" icon="md-add" @click="handleOpenCreate">新增</Button>-->
                        <Table
                                ref="table"
                                :columns="columnslist"
                                :data="dataWithPage"
                                :loading="loading"
                        >
                            <template slot-scope="{ row }" slot="ifPass">
                                <Badge v-if="row.ifPass === 0" status="error" text="否"  />
                                <Badge v-if="row.ifPass === 1" status="success" text="是" />
                            </template>
                            <template slot-scope="{ row }" slot="bxlb">
                                <span v-if="row.bxlb === 1">差旅费</span>
                                <span v-if="row.bxlb === 2">交通费</span>
                                <span v-if="row.bxlb === 3">办公用品</span>
                                <span v-if="row.bxlb === 4">运输费</span>
                            </template>
                            <template slot-scope="{ row , index}" slot="dxmbTywysbm">
                                <a @click="showDetail(row.dxmbTywysbm)">详情</a>
                                <Divider type="vertical" />
                                <a @click="handleDelete(row.index)" :style="{'color':'red'}">删除</a>
                            </template>
                        </Table>
                        <div class="ivu-mt ivu-text-center">
                            <Page :total="limitData.length" show-elevator :current.sync="current"  show-total />
                        </div>

                    </div>
                </TabPane>
                <TabPane label="未审核" name="no">
                    <!--数据渲染区域-->
                    <div class="i-table-no-border">
                        <!--        <Button type="primary" icon="md-add" @click="handleOpenCreate">新增</Button>-->
                        <Table
                                ref="table"
                                :columns="columnslist"
                                :data="dataWithPage"
                                :loading="loading"
                        >
                            <template slot-scope="{ row }" slot="ifPass">
                                <Badge v-if="row.ifPass === 0" status="error" text="否"  />
                                <Badge v-if="row.ifPass === 1" status="success" text="是" />
                            </template>
                            <template slot-scope="{ row }" slot="bxlb">
                                <span v-if="row.bxlb === 1">差旅费</span>
                                <span v-if="row.bxlb === 2">交通费</span>
                                <span v-if="row.bxlb === 3">办公用品</span>
                                <span v-if="row.bxlb === 4">运输费</span>
                            </template>
                            <template slot-scope="{ row , index}" slot="dxmbTywysbm">
                                <a @click="showDetail(row.dxmbTywysbm)">详情</a>
                                <Divider type="vertical" />
                                <a @click="goReview(index)" :style="{'color':'#4AABF2'}">去审核</a>
                                <Divider type="vertical" />
                                <a @click="handleDelete(index)" :style="{'color':'red'}">删除</a>
                            </template>
                        </Table>
                        <div class="ivu-mt ivu-text-center">
                            <Page :total="limitData.length" show-elevator :current.sync="current"  show-total />
                        </div>

                    </div>
                </TabPane>
            </Tabs>
        </Card>

    </div>

</template>

<script>
	import { mapState } from 'vuex';
	import datalist1 from './data'
	export default {
		data(){
			return{
				grid: {
					xl: 8,
					lg: 8,
					md: 12,
					sm: 24,
					xs: 24
				},
                activeName: 'yes',
				data: {
					name: '',
					status1: '',
					count: null,
					date: '',
					status2: '',
					status3: ''
				},
				//验证规则
				rules: {
				},
				dayak:[],
				count: 10,
				current: 1,
				list: [],
				size: 10,
				datalist: [],
				columnslist: [
					{
						title: '序号',
						key: 'id',
                        minWidth: 80

					},
					{
						title: '姓名',
						key: 'name',
                        minWidth: 80

					},
					{
						title: '报销金额',
						key: 'reimbursement',
                        minWidth: 80
					},
					{
						title: '日期',
						key: 'data',
						minWidth: 120
					},{
						title: '报销类别',
						key: 'bxlb',
						slot: 'bxlb',
						minWidth: 80
					},{
						title: '费用明细',
						key: 'moneyDeailys',
                        tooltip: true,
                        minWidth: 120
					},{
						title: '是否审核通过',
						key: 'ifPass',
                        slot:'ifPass',
						minWidth: 80
					},

					{
						title: '操作',
						slot: 'dxmbTywysbm',
						align: 'center',
						minWidth: 140
					}
				],
				loading: false,
			}
		},
		computed: {
			limitData () {
				let data = [...this.list];
				return data;
			},
			...mapState('admin/layout', [
				'isMobile'
			]),
			labelWidth () {
				return this.isMobile ? undefined : 100;
			},
			labelPosition () {
				return this.isMobile ? 'top' : 'right';
			},
			// 因为要动态计算总页数，所以还需要一个计算属性来返回最终给 Table 的 data
			dataWithPage () {
				const data = this.limitData;
				const start = this.current * this.size - this.size;
				const end = start + this.size;
				return [...data].slice(start, end);
			},
		},
        created() {
			this.getData();
        },
		methods: {
			//调用数据
			getData(){

				this.current = 1;
				this.loading = true;
				setTimeout( () => {
					this.list = datalist1;
					this.loading = false;
				},1000)
                //调接口
			/*	messageTemplate.findPage()
					.then(res => {
						// 返回数据
						this.dayak = res.data;
						this.count = res.count;
						this.loading = false;
					})
					.catch(err => {
						// 异常情况
					})*/
			},
			handleSubmit () {
				this.$emit('on-submit', this.data);
			},
			handleReset () {
				this.$refs.form.resetFields();
				this.$emit('on-reset');
			},
			/*新增*/
			handleOpenCreate(){
				this.$router.push('/finance/reimbursement/reimbursement-add')
			},
			// 新增数据
			handleCreate () {
				this.$refs.create.validate((valid) => {
					if (valid) {
						if (this.updateIndex < 0) {
							// 新建
							const mockData = this.mockOneData();
							mockData.desc = this.createData.desc;
							mockData.date = new Date();
							this.list.splice(0, 0, mockData);
							this.$Message.success('创建成功');
						} else {
							// 修改
							const updateItemName = this.dataWithPage[this.updateIndex].name;
							const updateItemIndex = this.list.findIndex(item => item.name === updateItemName);
							this.list[updateItemIndex].desc = this.createData.desc;
							this.$Message.success('修改成功');
						}

						this.showCreate = false;
						this.creating = false;
						this.$nextTick(() => {
							this.creating = true;
						});
					} else {
						this.creating = false;
						this.$nextTick(() => {
							this.creating = true;
						});
					}
				});
			},
			// 详情
			showDetail (dxmbTywysbm) {
				const item = dxmbTywysbm;
				this.$router.push({
					path: '/finance/reimbursement/reimbursement-detail',
					name:'reimbursement-detail',
					params:{
						item
					}
				});
			} ,
			//编辑
			handleEdit(dxmbTywysbm){
				const item = dxmbTywysbm;
				console.log(item);
				// this.$router.push('/evaluationDecision/fireInfo-details')
				this.$router.push({
					path: '/employee/comuser/comuser-add',
					name:'comuser-add',
					params:{
						item,
						index: 'edit'
					}
				});

			},
            //删除
			handleDelete (index) {
				console.log(index);
				/*    this.updateIndex = index;
                    const item = this.dataWithPage[index];
                    this.createData.desc = item.desc;
                    this.showCreate = true;*/
				this.$Modal.confirm({
					title: '删除',
					content: '确定删除吗？',
					onOk: () => {
						this.data.splice(index, 1);
						this.$Message.success('删除成功');
					}
				});
			},

            //审核
            goReview(index) {
                // this.$router.push('/evaluationDecision/fireInfo-details')
                const item = this.dataWithPage[index];
                this.$router.push({
                    path: '/finance/reimbursement/goReview',
                    name:'goReview',
                    params:{
                        item,
                        index: 'edit'
                    }
                });

			},

		},
	}
</script>


<style lang="less" scoped>
    .buttonContain{
        >button{
            width: 120px;
            height: 40px;
            font-size: 16px;
        }
    }

</style>
